<template>
    <div>

            <el-form  :inline="true" >
                <el-row class="templateQuery">
                    <el-col :span="8">
                        <el-form-item label="附件类型:" width="100%">
                           <el-select   v-model="filterMode" >
                                <el-option  label="测试报告" value="98410004"></el-option>

                            </el-select>
                        </el-form-item>
                    </el-col>


                    <el-col :span="8">
                           <el-upload
                            class="upload-demo"
                            ref="upload"
                            :action="''"
                            :http-request="submit"
                            :on-change="beforeUpload" 
                            :on-preview="handlePreview"
                            :on-remove="handleRemove"
                            :file-list="fileList"
                            :auto-upload="false">
                            <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                            <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
                            <div slot="tip" class="el-upload__tip">(温馨提示：请上传10M以下文件)</div>
                            </el-upload>
                    </el-col>

                </el-row>
          </el-form>


          <el-table
      class="jlTable"
      style="width: 100%;"
      :header-cell-style="{ background: '#F2F2F2', color: '#333' }"
      :data="templateList"
    >
     <el-table-column    align="center"   type="index"  label="序号"      width="50">          </el-table-column>
      <el-table-column    align="center"  prop="fileName"      label="附件名称"      width="180">
        <template slot-scope="scope">{{ scope.row.fileName }}</template>
      </el-table-column>
      <el-table-column    align="center"  prop="fileTypeCdName"      label="附件类型" width="150">    </el-table-column>
      <el-table-column    align="center"  prop="createUserName"      label="上传人" width="100">    </el-table-column>
      <el-table-column    align="center" prop="orgName"    label="上传人单位" width="120">   </el-table-column>
      <el-table-column    align="center"  prop="createDate"      label="上传时间" width="150">
         <template slot-scope="scope">{{scope.row.createDate.slice(0, 4) + "-" + scope.row.createDate.slice(4, 6)+ "-" + scope.row.createDate.slice(6, 8)  }}</template>
      </el-table-column>
      <el-table-column    align="center"   prop="custOrderFileId"   label="操作"  >
        <template slot-scope="scope">
          <el-row>
            <el-button type="success" @click="downFiles(scope.row )">下载</el-button>
            <el-button type="danger" @click="deleteFiles(scope.row )">删除</el-button>
          </el-row>
        </template>
       </el-table-column>
    </el-table>
     <el-row>
        <el-col :span="24" class="text-center">
          <el-button type="primary" size="medium" @click="submitFun">保存</el-button>
          <el-button size="medium" @click="closeFun">取消</el-button>
        </el-col>
      </el-row>
    <!-- <el-row type="flex" class="row-bg mar-15" justify="center">
      <el-col :span="10">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="pageChange"
          :current-page="1"
          background
          :page-sizes="[5, 10, 15, 20]"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
        ></el-pagination>
      </el-col>
    </el-row> -->
    </div>
</template>
<script>
import CustOrderService from "@/api/order/CustOrderService";
import OrderService from "@/api/order/OrderService";
import { mapState, mapMutations, mapActions, mapGetters } from "vuex";
export default {
    data(){
        return {
            filterMode:"98410004",
            productName:"",
            templateList:[],
            pageSize:10,
            pageIndex:0,
            total:0,
            fileList:[],
            newCTOInfo:[]

        };
    },
    props:{
	  	ODKInfo: {
			type:[ Object,String],
			default: () => {
				return {};
			},
		},
		CTOInfo: {
			type: [Array,Object],
			default: () => {
				return [];
			},
		},
  },
  computed: {
		...mapState("user", ["user"]),
	},
  mounted(){

      this.query();
  },
  
     methods: {

       beforeUpload(file,fileList){
         this.fileList = fileList;
     
         
          this.isLt2k = file.size / 1024/1024  < 10?'1':'0';        
          if(this.isLt2k==='0') {            
              this.$message({                
                  message: '上传文件大小不能超过10M!',                
                  type: 'error'            
              });
              this.fileList.pop();
              // var that = this;
              // setTimeout(function(){
              //   
              //   that.fileList.pop();    
              // });
          }   
          
          // 

       },
     async submitFun(){

        var param = {};
        param.custSoNumber = this.newCTOInfo[0].custSoNumber;
        param.processInstId = this.ODKInfo.processInstId;
        param.activityId = this.ODKInfo.activityInstId;
        param.orderItemId = this.newCTOInfo[0].orderItemId;
        param.userId = this.user.staffId;
        param.oneOrmany = "one";
        param.taskId = this.ODKInfo.taskId;
        param.orderAuditId = this.newCTOInfo[0].orderAuditId;
        param.custId = this.newCTOInfo[0].custId;
        
        var result = await CustOrderService.doWorkItem(param);
        

        if(result.meta.resultCode == "0"){
          this.$confirm(result.meta.resultMsg, "提示", {
            confirmButtonText: "确定",
            showCancelButton: false,
            type: "success",
            center: true
          });
           this.$emit("close");
        }else{
           this.$confirm(result.meta.resultMsg, "提示", {
            confirmButtonText: "确定",
            showCancelButton: false,
            type: "warn",
            center: true
          });
        }

      },
      closeFun(){
          this.$emit("close");
       },
           //下载附件
    async downFiles(filesData) {

      var custOrderFileId= filesData.custOrderFileId;
      var custOrderId= filesData.custOrderId;
      var fileName= filesData.fileName;
      var filePath= filesData.filePath;

      const res =await OrderService.handelDownFile({fileName,filePath});
      

      if(res.size>0){
        let url = window.URL.createObjectURL(new Blob([res])) ;//创建下载链接
        let link = document.createElement('a') ;//创建a标签
        link.style.display = 'none'  ;//将a标签隐藏
        link.href = url ; //给a标签添加下载链接
        link.setAttribute('download', fileName); // 此处注意，要给a标签添加一个download属性，属性值就是文件名称 否则下载出来的文件是没有属性的，空白白
        document.body.appendChild(link)  ;
        link.click() ; //执行a标签
      }else{
        this.$confirm(fileName+"下载失败!", "提示", {
          confirmButtonText: "确定",
          showCancelButton: false,
          type: "warn",
          center: true
        });
      }

    },
       async query(){
            
            if(typeof(this.CTOInfo) == "object"){
                    this.newCTOInfo = [this.CTOInfo]
            }else{
                this.newCTOInfo = this.CTOInfo;
            }
            
            var params = {};
            params.custSoNumber = this.newCTOInfo[0].custSoNumber;
            params.custOrderId = this.newCTOInfo[0].custOrderId;
            params.orderItemId = this.newCTOInfo[0].orderItemId;
            params.orderItemSeq = this.newCTOInfo[0].orderItemSeq;
            params.fileTypeCd = this.filterMode;
            params.custOrderFileId = "";
            params.custItemFileFlag = "2";
            params.custId = this.newCTOInfo[0].custId;

            var pageInfo = {
                pageIndex: this.pageIndex,
                pageSize: this.pageSize
            }

            var custOrderId = this.newCTOInfo[0].custOrderId;//this.CTOInfo[0].custOrderId;
            var orderItemId = this.newCTOInfo[0].orderItemId;// this.CTOInfo[0].orderItemId;
            var custId = this.newCTOInfo[0].custId;//this.CTOInfo[0].custId;
            const result = await OrderService.qryFilesItem({custOrderId,orderItemId,custId});

            
             this.templateList = result.meta.orderItemFiles;
            //  this.total = result.meta.total;


        },
         //页面改变触发事件
        pageChange(val) {
            
            this.pageIndex = val;
            this.query();

        },
        handleSizeChange(val){
            
            this.pageSize = val;
            this.query();
        },
        handleRemove(file, fileList) {
            
        },
        handlePreview(file) {
            
        },
         //删除附件
    async deleteFiles(filesData) {
      var custOrderFileId= filesData.custOrderFileId;
      var custOrderId= filesData.custOrderId;
      var orderItemId= this.orderItemId;
      var fileName= filesData.fileName;
      var filePath= filesData.filePath;
      var custId= this.newCTOInfo[0].custId;// filesData.custId
      var createUser= filesData.createUser;
      var actType= 'DEL' ;

      const delResult =await OrderService.delFile({fileName,filePath,custOrderFileId,custOrderId,orderItemId,createUser,actType,custId});
      

      this.$confirm(delResult.meta, "提示", {
        confirmButtonText: "确定",
        showCancelButton: false,
        type: "warn",
        center: true
      });

     this.query();

    } ,
      async submit(val){
      
      var file = val.file;

      let paramFormData = new FormData();

      paramFormData.append("file", file);
      paramFormData.append("custOrderId", this.newCTOInfo[0].custOrderId);
      paramFormData.append("custId", this.newCTOInfo[0].custId);
      paramFormData.append("orderItemId", this.newCTOInfo[0].orderItemId);
      paramFormData.append("actType", "ADD");
      paramFormData.append("createUser", this.newCTOInfo[0].createStaff);
      paramFormData.append("fileTypeCd", this.filterMode);
      paramFormData.append("custItemFileFlag", "2");

      
      const uploadResult =await OrderService.handelUploadFile( paramFormData );
      
      if (uploadResult.code == 1) {
          this.$confirm(uploadResult.meta, "提示", {
            confirmButtonText: "确定",
            showCancelButton: false,
            type: "warn",
            center: true
          });
      }else if(uploadResult.code == 0){
        this.$confirm("附件:"+file.name+"上传成功", "提示", {
            confirmButtonText: "确定",
            showCancelButton: false,
            type: "warn",
            center: true
          });

        }

        this.query();
        },
        submitUpload() {
            this.$refs.upload.submit();
        },


     }

}
</script>
<style lang="scss">

    .el-form--inline .el-form-item {
        display: inline-flex;
        margin-right: 0.1rem;
        vertical-align: top;
        width: 100%;
    }

</style>


